<template>
	<view class="page">
		<wd-form ref="formRef" :model="formData">
			<wd-picker
				v-model="formData.categoryId"
				prop="categoryId"
				:columns="categoryList"
				label="分类"
				label-width="60px"
				placeholder="请选择分类"
				:rules="[{ required: true, message: '请选择分类' }]"
			/>

			<wd-input
				v-model="formData.name"
				prop="name"
				label="菜名"
				label-width="60px"
				placeholder="请输入菜名"
				:rules="[{ required: true, message: '请输入菜名' }]"
			/>

			<wd-textarea
				class="dishes-description"
				v-model="formData.description"
				prop="description"
				label="简介"
				label-width="60px"
				placeholder="请输入菜名简介"
				:rules="[{ required: true, message: '请输入菜名简介' }]"
				style="border: 1p solid #bbbbbb"
			/>

			<!-- 上传图片 -->
			<view class="form-upload">
				<view class="form-upload-label">
					<text class="form-upload-label-icon">*</text>
					<text class="form-upload-label-text">图片</text>
				</view>
				<wd-upload
					v-model:file-list="fileList"
					:action="action"
					:header="header"
					name="image"
					image-mode="aspectFill"
					accept="image"
					:limit="1"
					:max-size="20 * 1000 * 1000"
					@success="onUploadSuccess"
				></wd-upload>
			</view>
		</wd-form>

		<view class="foot">
			<wd-button class="foot-btn" type="info" @tap="onCancel">取消</wd-button>
			<view class="foot-gap"></view>
			<wd-button class="foot-btn" type="primary" @tap="handleSubmit">提交</wd-button>
		</view>
	</view>
</template>

<script setup>
import { ref } from 'vue';
import { onLoad } from '@dcloudio/uni-app';
import { useController } from './controller.js';
import { showConfirmDialog } from '../../hooks/useConfirm';

const formRef = ref();
const { formData, fileList, categoryList, header, action, ...ctl } = useController();

onLoad((event) => {
	// 获取菜品分类选项列表
	ctl.getCategoryList();

	if (!event.id) return;
	ctl.getDishes(event.id);
});

const onUploadSuccess = (event) => {
	console.log('event', event);
	const { picture, thumbnail } = JSON.parse(event.file.response).data;
	formData.value.picture = picture;
	formData.value.thumbnail = thumbnail;
};

const handleSubmit = async () => {
	await validateForm();
	await ctl.updateDish();
	await showConfirmDialog({ title: '成功', content: '菜品操作成功' });
	uni.navigateBack();
};

const onCancel = () => {
	uni.navigateBack();
};

async function validateForm() {
	const validation = await formRef.value.validate();
	if (!validation.valid) throw new Error('有未填写项目');

	console.log(formData.value);
	if (!formData.value.picture || !formData.value.thumbnail) {
		showConfirmDialog({ title: '缺少图片', content: '请上传菜品图片' });
		throw new Error('没有上传菜品图片');
	}
}
</script>

<style scoped>
.page {
	width: 100%;
	height: 100%;

	display: flex;
	flex-direction: column;
	justify-content: space-between;
}

.form-create-category {
	text-align: center;
	color: #268dff;
	font-weight: 14px;
}

.form-upload {
	display: flex;
	padding: 15px;
}

.form-upload-label {
	width: 60px;
	margin-right: 15px;
}

.form-upload-label-icon {
	margin-right: 4px;
	color: #fa4350;
}

.form-upload-label-text {
	font-size: 14px;
	color: #222;
}

.dishes-description >>> .wd-textarea__value {
	border-radius: 16rpx;
	border: 1px solid #ddd;
}

.foot {
	padding: 32rpx;
	display: flex;
	justify-content: space-between;
}

.foot-gap {
	width: 32rpx;
}

.foot-btn {
	flex: 1;
}
</style>
